<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #form1 {
            width: 480px;
            border: 1px solid #eee;
            border-radius: 5px;
            margin: 30px auto;
            padding: 10px;
            line-height: 30px;
            position: relative;
        }

        #tab1 {
            width: 500px;
            margin: 30px auto;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #000;
            padding: 5px;
        }

        tr {
            cursor: pointer;
        }

        tbody tr td:first-child {
            text-align: center;
        }

        input[type="checkbox"] {
            width: 15px;
            height: 15px;
        }

        input[type="button"] {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }

        #div1 {
            position: relative;
            width: 480px;
            padding: 10px;
            margin: 0 auto;
        }
    </style>
    <script>
        // function getChecked(form,name){
        //     var arr = [];
        //     for(var i = 0; i < form[name].length;i++){
        //         if(form[name][i].checked){
        //             arr.push(form[name][i].value);
        //         }
        //     }
        //     if(form[name][0].type == 'radio'){
        //         return arr[0];
        //     }
        //     if(form[name][0].type == 'checkbox'){
        //         return arr;
        //     }
        // }
        function getChecked(form, name) {
            var arr = [];
            for (var i = 0; i < form[name].length; i++) {
                if (form[name][i].checked) {
                    arr.push(form[name][i].value);
                }
            }
            if (form[name][0].type == 'radio') {
                return arr[0];
            }
            if (form[name][0].type == 'checkbox') {
                return arr;
            }
        }
    </script>
    <script>
        window.onload = function(){
            var data = [
        { 'name':'张三','sex':'男','age':'22'},
        { 'name':'李四','sex':'女','age':'23'},
        { 'name':'王五','sex':'男','age':'24'},
        { 'name':'麻六','sex':'男','age':'25'},
        { 'name':'孙七','sex':'男','age':'26'},
        { 'name':'马八','sex':'男','age':'27'},
            ];
            var form = document.getElementById("form1"),
                table = document.getElementById("tab1"),
                tbody = table.tBodies[0],
                thead = table.tHead,
                checkAll = document.getElementById("checkAll"),
                deletes = document.getElementById("delete");
                for(var i = 0; i < data.length;i++){
                    var tr = document.createElement("tr");
                    var td = document.createElement("td");
                    td.innerHTML = '<input type="checkbox" />';
                    tr.appendChild(td);

                    var td = document.createElement("td");
                    td.innerHTML = data[i].name;
                    tr.appendChild(td);

                    var td = document.createElement("td");
                    td.innerHTML = data[i].sex;
                    tr.appendChild(td);

                    var td = document.createElement("td");
                    td.innerHTML = data[i].age;
                    tr.appendChild(td);

                   tbody.appendChild(tr);
                    colorLine();
                }
                checkbox();
                form.add.onclick = function(){
                    var arr = [];
                    arr[0] = form.name.value;
                    arr[1] = getChecked(form,'sex');
                    arr[2] = form.age.value;

                    for(var i = 0; i < arr.length; i++){
                        if(!arr[i]){
                            alert('有项目没填!')
                            return;
                        }
                    }
                    var tr = document.createElement("tr");
                    var td = document.createElement("td");
                    td.innerHTML = '<input type="checkbox" />';
                    tr.appendChild(td);

                    for(var i = 0; i < arr.length;i++){
                        var td = document.createElement("td");
                        td.innerHTML = arr[i];
                        tr.appendChild(td);
                    }
                    tbody.appendChild(tr);
                    form.reset();
                    colorLine();
                    checkbox();
                }
                function colorLine(){
                    for(var i = 0; i < tbody.rows.length; i++){
                        if(i%2){
                            tbody.rows[i].style.background = 'tan'
                        }else{
                            tbody.rows[i].style.background = 'orange'
                        }
                    }
                }
                function checkbox(){
                    for(var i = 0; i < tbody.rows.length;i++){
                        tbody.rows[i].onclick = function(){
                            //cells 集合返回表格中所有 <td> 或 <th> 元素。
                            this.cells[0].children[0].checked = this.cells[0].children[0].checked == false ? true : false;
                          
                            check();
                        }
                        tbody.rows[i].cells[0].children[0].onclick = function(){
                            this.checked = this.checked == false ? true : false;
                            check();
                        }
                    }
                    table.tHead.onclick = function(){
                        checkAll.checked = checkAll.checked == false ? true : false;
                        checkAll();
                    }
                    checkAll.onclick = function(){
                        this.checked = this.checked == false ? true : false;
                        checkAll();
                    }
                    function checkAll(){
                        for(var i = 0; i < tbody.rows.length;i++){
                            tbody.rows[i].cells[0].children[0].checked = checkAll.checked;
                        }
                    }
                    function check(){
                        for(var i = 0; i < tbody.rows.length; i++){
                            if(!tbody.rows[i].cells[0].children[0].checked){
                                checkAll.checked = false;
                                return;
                            }
                        }
                        checkAll.checked = true;
                    }
                }
                deletes.onclick = function(){
                    checkAll.checked = false;
                    for(var i = 0; i< tbody.rows.length;i++){
                        if(tbody.rows[i].cells[0].children[0].checked){
                            tbody.removeChild(tbody.rows[i]);
                            i--;
                        }
                    }
                    colorLine();
                }
        }
     
    </script>
</head>

<body>
    <form id="form1">
        请输入姓名：<input type="text" name="name"><br>
        请选择性别：<input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女<br>
        请输入年龄：<input type="text" name="age"><br>
        <input type="button" value="添加到表格" name="add">
    </form>
    <table id="tab1">
        <thead>
            <tr>
                <th width="20%"><input type="checkbox" id="checkAll" id="checkAll" /> 全选</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div id="div1">
        <input type="button" value="删除所选行" id="delete">
    </div>
</body>

</html>